<template>
<div class="menu" style="display: flex;justify-content: space-around;align-items: center">
  <div style="display: flex;flex-direction: column">
    <img src="../assets/bottom_picture/find.png">
    <span>发现</span>
  </div>
  <div style="display: flex;flex-direction: column">
    <img src="../assets/bottom_picture/blog.png">
    <span>播客</span>
  </div>
  <div style="display: flex;flex-direction: column">
    <img src="../assets/bottom_picture/my.png">
    <span>我的</span>
  </div>
  <div style="display: flex;flex-direction: column">
    <img src="../assets/bottom_picture/mv.png">
    <span>mv</span>
  </div>

</div>
</template>

<script>
export default {
  name: "BottomMenu"
}
</script>

<style scoped>
img{
  width: 50px;
  height: 50px;
}
.menu{
  background-color: white;
  width: 100%;
  height: 80px;
  position: fixed;
  /*z-index: 10;*/
  /*left: 0;
  right: 0;*/
  /*很重要*/

}
span{
  text-align: center;
}
</style>
